<template>
  <div class="carousel">

    <div v-show="showcarouse">
      <div class="carousel-query">
        <div class="parcel">
          <el-button type="primary" class="primary el-icon-plus" @click="add($event)">添加</el-button>
          <p>
            <el-select clearable v-model="belongvalue" placeholder="所属模块" class="select1" @change="list1fn($event)">
              <el-option v-for="item in list1" :key="item.id" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
            <el-select clearable v-model="usevalue" placeholder="应用类型" class="select1" @change="list2fn($event)">
              <el-option v-for="item in list2" :key="item.id" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
            <el-select clearable v-model="jumpvalue" placeholder="跳转类型" class="select1" @change="list3fn($event)">
              <el-option v-for="item in list3" :key="item.id" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
          </p>
        </div>
        <div class="inputbox">
          <el-input v-model="keyvalue" placeholder="请输入标题"></el-input>
        </div>
        <el-button type="primary" class="querybutton" @click="query">查询</el-button>
        <!-- <el-button type="primary" class="querybutton" @click="reset">重置</el-button> -->
      </div>
      <div class="carousel-table">
        <el-table :data="carouseldata" size="mini" border style="width: 100%" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }">
          <!-- <el-table-column type="index" width="50" align="center"></el-table-column> -->
          <el-table-column prop="sort" label="排序" width="100" align="center">
          </el-table-column>
          <el-table-column prop="bannerPath" label="图片" width="180" align="center">
            <template slot-scope="scope">
              <img id="bannerid" :src="scope.row.bannerPath" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="100" align="center">
          </el-table-column>
          <el-table-column prop="typeId" label="所属模块" width="120" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.typeId == 1">首页轮播</template>
              <template v-if="scope.row.typeId == 2">库存轮播</template>
              <template v-if="scope.row.typeId == 3">一行一列 </template>
              <template v-if="scope.row.typeId == 4">一行两列</template>
              <template v-if="scope.row.typeId == 5">一行一列[商城]</template>
            </template>
          </el-table-column>
          <el-table-column prop="apptypeId" label="应用类型" width="120" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.apptypeId == 0">全部</template>
              <template v-if="scope.row.apptypeId == 1">小程序</template>
              <template v-if="scope.row.apptypeId == 2">APP </template>
            </template>
          </el-table-column>
          <el-table-column prop="jumbtypeId" label="跳转类型" width="120" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.jumbtypeId == 1">小程序</template>
              <template v-if="scope.row.jumbtypeId == 2">h5 </template>
              <template v-if="scope.row.jumbtypeId == 3">APP </template>
              <template v-if="scope.row.jumbtypeId == 4">不跳转 </template>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.updateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ifpass" label="已审" width="90" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.ifpass == 0">未审核</template>
              <template v-if="scope.row.ifpass == 1">已审核 </template>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center" width="260">
            <template slot-scope="{ row, $index }">
              <p id="button">
                <!-- <el-button id="btn" class="el-icon-arrow-up icon" @click="upclick(row,$index)"> </el-button>
                <el-button id="btn" class="el-icon-arrow-down icon" @click="bottom(row,$index )"> </el-button> -->
                <el-button id="btn" class="edit el-icon-edit" size="mini" @click="edit(row, $index)">修改
                </el-button>
                <el-button id="btn" class="delt el-icon-delete" size="mini" @click="dele(row)">删除</el-button>
              </p>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination id="el-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[10, 15, 20]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
      </el-pagination>
    </div>
    <!-- 新增修改展示该内容 -->
    <div v-show="!showcarouse" class="carousel-container">
      <!-- 不管是添加 还是编辑 都会通过点击事件跳转到这个页面中 区别是一个带参 一个不带参 -->
      <el-divider content-position="left">{{ addoredit }}</el-divider>
      <p class="flex">
        <span>标题</span>
        <el-input v-model="title" placeholder="请输入标题"></el-input>
      </p>
      <!-- <p class="attrmodul">所属模块
        <ul class="attrul">
          <li v-for="(item, index) in list1" :key="index" @click="rowClick1(index, item)">
            <span class="sty" :class="{ activeClass: active1 == item.id }">{{ item.title }}</span>
            <i class="el-icon-check" :class="{ act: active1 == item.id }"></i>
          </li>
        </ul>
      </p>
      <p class="attrmodul">应用类型
        <ul class="attrul">
          <li v-for="(item, index) in list2" :key="index" @click="rowClick2(index, item)">
            <span class="sty" :class="{ activeClass: active2 == index }">{{ item.title }}</span>
            <i class="el-icon-check" :class="{ act: active2 == index }"></i>
          </li>
        </ul>
      </p>
      <p class="attrmodul">跳转类型
        <ul class="attrul">
          <li v-for="(item, index) in list3" :key="index" @click="rowClick3(index, item)">
            <span class="sty" :class="{ activeClass: active3 == item.id }">{{ item.title }}</span>
            <i class="el-icon-check" :class="{ act: active3 == item.id }"></i>
          </li>
        </ul>
      </p> -->
      <div style="display:flex">
        <p class="attrmodul">所属模块：</p>
        <div style="line-height:67px">
          <el-radio v-model="typeId" label="1">首页轮播</el-radio>
          <el-radio v-model="typeId" label="2">库存轮播 </el-radio>
          <el-radio v-model="typeId" label="3">一行一列 </el-radio>
          <el-radio v-model="typeId" label="4">一行两列</el-radio>
          <el-radio v-model="typeId" label="5">一行一列[商城]</el-radio>
        </div>
      </div>
        <div style="display:flex">
        <p class="attrmodul">应用类型：</p>
        <div style="line-height:67px">
          <el-radio v-model="apptypeId" label="0">全部</el-radio>
          <el-radio v-model="apptypeId" label="1">小程序 </el-radio>
          <el-radio v-model="apptypeId" label="2">APP</el-radio>
        </div>
      </div>
        <div style="display:flex">
        <p class="attrmodul">跳转类型：</p>
        <div style="line-height:67px">
          <el-radio v-model="jumbtypeId" label="1">小程序 </el-radio>
          <el-radio v-model="jumbtypeId" label="2">h5</el-radio>
          <el-radio v-model="jumbtypeId" label="3">APP</el-radio>
          <el-radio v-model="jumbtypeId" label="4">不跳转</el-radio>
        </div>
      </div>
       
      

      <p class="flex">
        <span> URL链接</span>
        <el-input v-model="href" placeholder="请输入URL链接"></el-input>
      </p>
      <p>
        图片
        <el-button @click="addupload">点击上传</el-button>
        <el-upload :limit="1" action="/file/fileMapping/uploadAvatarMall" list-type="picture-card"
          :on-success="handleAvatarSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
          class="avatar quill-img" ref="avatars" multiple>
          <i class="el-icon-plus"></i>
        </el-upload>
        <span class="size">【尺寸】首页轮播:854 x637;一行两列:341x210一行一列: 700 x 200</span><br>
        <img v-if="bannerPath" :src="bannerPath" alt="" class="bannerpath">


        <!-- <i class="el-icon-close" v-show="flag"></i> -->
        <!-- <span class="imgpath picturebox" v-show="!flag">我是图片 <i class="el-icon-close close" @click="close" ></i></span> -->
      </p>
      <p>
        审核
        <el-switch v-model="audit" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0"
          @change="shenhe">
        </el-switch>
      </p>
      <p>
        是否显示轮播图
        <el-switch v-model="display" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0"
          @change="shenhe">
        </el-switch>
        <!-- <span>{{display== '1' ?' 显示':'不显示'}}</span> -->
      </p>
      <p>
        排序
        <el-input v-model="sort" placeholder="请输入排序"></el-input>
      </p>
      <el-button type="primary" @click="Update" class="greensz el-icon-folder">保存</el-button>
      <el-button @click="cancel" class="greensz el-icon-close">关闭</el-button>


    </div>
  </div>
</template>

<script>
  import {
    quillEditor
  } from "vue-quill-editor"; // 调用编辑器

  export default {
    name: "carousel",
    components: {
      quillEditor,
    },
    data() {
      return {
        sort: null,

        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        flagsnone: false,
        haveyou: false,
        currentPage: 1, // 当前页码
        total: 20, // 总条数
        pageSize: 8, // 每页的数据条数

        page: 1, // 当前页码
        limit: 3, // 每页数量
        total: 0, // 总数量
        showapp: false,
        active4: -1,
        active1: 1, // 默认选中第一个样式
        active2: 0, // 默认选中第一个样式
        active3: 1, // 默认选中第一个样式

        showcarouse: true, //控制展示和编辑的页面
        belongvalue: "", //所属模块绑定值
        usevalue: "", //应用类型绑定值
        jumpvalue: "", //跳转类型绑定值

        keyvalue: "", //关键字绑定值
        carouseldata: [{
          id: 1,
          dates: "mock",
          data2: "mockdata",
          data3: "mockdata",
          data4: "mockdata",
          data5: "mockdata",
          data6: "mockdata",
        }, ], //轮播表格
        flag: null,
        addoredit: "", //添加或者是编辑标题
        title: "", //标题
        href: "", //url链接
        audit: null, //审核
        display: null,
        //   使用ref绑定初始化添加和编辑的默认值
        // ul1: {
        //   background: "rgb(95,184,120)",
        // }, //所属模块
        // ul2: {
        //   background: "rgb(95,184,120)",
        // },
        // ul3: {
        //   background: "rgb(95,184,120)",
        // },
        //   绑定图标事件
        ul1i: {
          color: "rgb(95,184,120)",
        },
        ul2i: {
          color: "rgb(95,184,120)",
        },
        ul3i: {
          color: "rgb(95,184,120)",
        },
        list1: [{
            title: "首页轮播",
            id: 1,
            state: true
          },
          {
            title: "库存轮播",
            id: 2,
            state: true
          },
          {
            title: "一行一列",
            id: 3,
            state: true
          },
          {
            title: "一行两列",
            id: 4,
            state: true
          },
          {
            title: "一行一列商城",
            id: 5,
            state: true
          },
        ],
        list2: [{
            title: "全部",
            id: 0,
            state: true
          },
          {
            title: "小程序",
            id: 1,
            state: true
          },
          {
            title: "APP",
            id: 2,
            state: true
          },
        ],
        list3: [{
            title: "小程序",
            id: 1,
            state: true
          },
          {
            title: "H5",
            id: 2,
            state: true
          },
          {
            title: "APP原生",
            id: 3,
            state: true
          },
          {
            title: "不跳转",
            id: 4,
            state: true
          },
        ],
        app: [{
            title: "机票",
            id: 0,
            state: true
          },
          {
            title: "航班动态",
            id: 1,
            state: true
          },
          {
            title: "酒店",
            id: 2,
            state: true
          },
          {
            title: "贵宾厅",
            id: 3,
            state: true
          },
          {
            title: "接送机",
            id: 3,
            state: true
          },
          {
            title: "登机牌",
            id: 3,
            state: true
          },
          {
            title: "火车票",
            id: 3,
            state: true
          },
          {
            title: "空客",
            id: 3,
            state: true
          },
          {
            title: "VIP通道",
            id: 3,
            state: true
          },
          {
            title: "全程引领",
            id: 3,
            state: true
          },
          {
            title: "代客泊车",
            id: 3,
            state: true
          },
        ],

        red: 0,
        typeId: "1", //改变后的值
        apptypeId:"0",
        jumbtypeId:"1",
        href: "", //触发链接
        sort: 0,
        bannerPath: "",
        fpass: 0,
        upbannerId: null, //修改要传的id

        flagvalue: "", //判断用户点击的是添加按钮还是编辑按钮
      };
    },
    mounted() {
      // this.$refs.tagItem[0].style.background = "#5FB878";
      // for (let i = 0; i < 3; i++) {
      //   this.$refs[`ul${i + 1}`].style.background = "#5FB878";
      // }
      // this.rowClick1();
      // this.rowClick2();
      // this.rowClick3();
      this.query(); //轮播列表数据DC
    },
    methods: {
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.query();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.currentPage = value;
        this.query();
        // orders = res.data;
      },

      upclick(item, index) {
        console.log(item, index, '-----')

        var currentarr = item
        this.carouseldata.unshift(currentarr);







        this.$message({
          type: "success",
          message: "操作成功",
        });
        // this.query();
        // this.carouseldata.unshift(1);


      },
      bottom(item, index) {
        this.$message({
          type: "success",
          message: "操作成功",
        });
        this.carouseldata.splice(index, 1);
      },
      addupload() {
        document.querySelector(".quill-img input").click();
      },
      handleAvatarSuccess(response) {
        this.flagsnone = true;

        this.bannerPath = response[0];
        console.log(this.bannerPath);
        this.haveyou = true;
      },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        console.log(file);
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 审核
      shenhe(value) {
        this.fpass = value;
      },
      //每页条数改变时触发 选择一页显示多少行

      list1fn(value) {
        console.log(value);
      },
      list2fn(value) {
        console.log("---------44", value);
      },
      list3fn(value) {
        console.log(value);
      },
      rowClick1: function (index, item) {
        // item.state=!item.state
        this.active1 = item.id; //将点中的id 赋绿色背景
        this.typeId = item.id;
      },

      rowClick2: function (index, item) {
        this.active2 = index;
        this.addtypeid = index;
      },
      rowClick3: function (index, item) {
        console.log(index, item);
        this.active3 = item.id;
        this.jump = item.id; //将点中的下标给jump
        if (index == "2") {
          this.showapp = true;
        } else {
          this.showapp = false;
        }
      },
      rowClick4(index, item) {
        this.active4 = index;
      },
      //   控制悬浮时间
      // aa(index) {
      //   //   console.log(this.$refs.attrul);
      //   //   拿到ul li里面的东西时 将鼠标移入的某一个span值我的的颜色变绿色
      // },
      //表格查询事件

      reset() {
        this.belongvalue = null
        this.usevalue = null
        this.jumpvalue = null
        this.keyvalue = null

        this.query()
      },
      query() {
        this.$axios
          .mallBannerList({
            typeId: this.belongvalue || 0,
            apptypeId: this.usevalue || 0,
            jumbtypeId: this.jumpvalue || 0,
            title: this.keyvalue || "",
          })
          .then((res) => {
            this.pageTotal = res.total;
            this.carouseldata = res.data;
            console.log(this.carouseldata);
          });
      },
      //表格添加事件
      add(a) {
        // 点击添加的给一个变量赋值 去判断可以掉哪个接口
        this.flag = true; //true就是有人在用着 为true走添加页面
        this.showcarouse = false;
        // console.log(this.list[0]);
      },
      //删除事件
      dele(row) {
        console.log(row.bannerId);
        this.$confirm(`你确定删除吗`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          })
          .then(() => {
            this.deleteMallBanner(row.bannerId);
            this.$message({
              message: "删除成功",
              type: "success",
            });
          })
          .catch(() => {
            this.$message({
              message: "已取消删除",
              type: "warning",
            });
          });
      },
      deleteMallBanner(id) {
        this.$axios.deleteMallBanner({
          bannerId: id
        }).then((res) => {
          this.query();
          console.log(res);
        });
      },

      // 编辑事件
      edit(row) {
        this.upbannerId = row.bannerId;
        console.log(this.upbannerId);

        this.flag = false;
        this.showcarouse = false;
        //   看看flag有没有人再用 为false走编辑

        this.$axios.mallBannerById({
          bannerId: row.bannerId
        }).then((res) => {
          console.log(res.data);
          this.title = res.data.title;
          this.typeId = String(res.data.typeId);
          this.apptypeId = String(res.data.apptypeId);
          this.jumbtypeId = String(res.data.jumbtypeId);
    
          this.bannerPath = res.data.bannerPath;
          this.href = res.data.navigateUrl;
          this.audit = res.data.ifpass;
          this.display = res.data.display;
          this.sort = res.data.sort
        
        });
        if (this.flag == false) return (this.addoredit = "编辑Banner图");
        //调用编辑接口 渲染页面上数据
      },
      // ----------

      // 保存事件
      Update() {
        if (this.flag == true) {
          // 检测到收集到的数据为空时 弹框
          if (this.title == "") {
             this.$message({
          type: "warning",
          message: "请填写标题",
        });
          }
          this.$axios
            .addBanner({
              bannerPath: this.bannerPath,
              title: this.title,
              typeId: Number(this.typeId),
              apptypeId: Number(this.apptypeId),
              jumbtypeId: Number(this.jumbtypeId),
              ifpass: this.fpass,
              navigateUrl: this.href,
              sort: this.sort,
              display: this.display,
              sort: this.sort
            })
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "添加Banner图成功",
                });
                this.showcarouse = !this.showcarouse;
                this.query();
              }
              // console.log(res);
            });
        } else {
          // 如果我的flag为false 在保击之前掉修改
          this.$axios
            .updateMallBanner({
              bannerId: this.upbannerId,
              title: this.title,
              typeId: this.typeId,
              addtypeid: this.addtypeid,
              jumbtypeId: this.jump,
              ifpass: this.audit,
              navigateUrl: this.href,
              display: this.display,
              sort: this.sort
            })
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "修改Banner图成功",
                });
                this.showcarouse = true;
                this.query();
              }
            });
        }

        this.query()
        // 点击保存的时候掉修改
        // 走编辑 才能走保存
      },
      // -------------
      //关闭事件
      cancel() {
        this.showcarouse = true;
        this.bannerPath = null;
        this.title = null;
        this.active1 = 1;
        this.active2 = 0;
        this.active3 = 1;
        this.href = null;
        this.bannerPat = null;
        this.audit = null;
        this.display = null;
        this.sort = null

        // 每次点击关闭时清空当前页面所有数据、
      },
      // 图标关闭事件
      close(row) {
        this.$confirm(`确定删除该图片吗`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          })
          .then(() => {
            // 点击确定按钮之后发请求
            //   let a = this.deleteMallProduct(row.productId);
            //   if (a.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            // 再次获取列表的数据
            //   }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
    },
  };
</script>

<style scoped>
  /* .aa {
 
} */
  .act {
    color: #6090ec !important;
  }

  .activeClass {
    display: inline-block;
    width: 100%;
    height: 40px;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #6090ec !important;
  }

  .reds {
    color: red;
  }

  .carousel-query {
    width: 100%;
    height: 100px;
    margin: 20px auto;
  }

  .green {
    float: left;
    width: 10px;
    height: 100%;
    background-color: #009688;
  }

  .carousel-query .parcel {
    padding: 30px;
    float: left;
  }

  .primary {
    background-color: #6090ec;
    border-color: transparent;
  }

  .carousel-query .parcel>p {
    display: inline-block;
    margin-left: 100px;
  }

  .el-select {
    margin-right: 10px;
  }

  .inputbox {
    float: left;
    z-index: 2022;
    margin-top: 30px;
    margin-left: -20px;
  }

  .querybutton {
    width: 84px;
    margin-top: 30px;
    margin-left: 20px;
    background-color: #6090ec;
    border-color: transparent;
  }

  .carousel-table {
    width: 95%;
    margin-left: 10px;
  }

  .icon {
    width: 50px;
    height: 30px;
    background-color: #6090ec;
    color: #fff;
  }

  .cell .el-button {
    padding-top: 10px;
  }

  .edit {
    padding-top: 10px;
    background-color: #6090ec;
    color: #fff;
  }

  .delt {
    padding-top: 10px;
    background-color: #ff5722;
    color: #fff;
  }

  .carousel-container {
    margin: 30px;
    line-height: 70px;
  }

  .greensz {
    width: 100px;
    background-color: #6090ec;
    color: white;
  }

  .flex {
    width: 633px;
    display: inline-flex;
  }

  .flex span {
    width: 80px;
    display: inline-block;
    margin-right: 5px;
  }

  .size {
    color: #ff1f1f;
  }

  .attrul li {
    display: inline-flex;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-left: 15px;
  }

  .attrul li span:nth-of-type(1) {
    width: 100%;
    color: #fff;
    display: inline-block;
    height: 40px;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    background-color: #c9c9c9;
  }

  .attrul li i:nth-of-type(1) {
    width: 50px;
    text-indent: 0.2rem;
    line-height: 40px;
    color: #fff;
  }

  .attrmodul {
    display: flex;
  }

  .picturebox {
    position: relative;
  }

  .imgpath {
    display: inline-block;
    width: 478px;
    height: 205px;
    border: 1px solid red;
  }

  .close {
    position: absolute;
    top: 0px;
    right: 0px;
  }

  .el-divider .el-divider__text {
    font-size: 25px;
  }

  .bannerpath {
    width: 401px;
    height: 114px;
  }

  #button {
    width: 184px;
  }

  #button #btn {
    margin-bottom: 10px;
  }

  #bannerid {
    width: 100%;
    height: 100%;
  }

  #el-pagination {
    width: 800px;
    height: 200px;
    margin: auto;
    position: relative;
    margin-top: 20px;
  }

  .carousel {
    position: relative;
  }
</style>